<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        html {
            font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
            font-size: 1.3em;
            max-width: 40rem;
            padding: 0.8rem;
            margin: auto;
            line-height: 1.6rem;
        }

        .highlight {
            display: inline-block;
            background: linear-gradient(100deg, #ffffaf00 1%, #ffffaf 2.5%, #ffffaf80 5.7%, #ffffaf1a 93%, #ffffafb4 95%, #ffffaf00 98%), linear-gradient(182deg, #ffffaf00, #ffffaf4d 8%, #ffffaf00 15%);
        }

        .green-highlight {
            display: inline-block;
            background: linear-gradient(100deg, #b8ffaf00 1%, #b8ffaf 2.5%, #b8ffaf80 5.7%, #b8ffaf1a 93%, #b8ffafb4 95%, #b8ffaf00 98%), linear-gradient(182deg, #b8ffaf00, #b8ffaf4d 8%, #b8ffaf00 15%);
        }

        .pink-highlight {
            display: inline-block;
            background: linear-gradient(100deg, #ffafd400 1%, #ffafd4 2.5%, #ffafd480 5.7%, #ffafd41a 93%, #ffafd4b4 95%, #ffafd400 98%), linear-gradient(182deg, #ffafd400, #ffafd44d 8%, #ffafd400 15%);
        }

        .blue-highlight {
            display: inline-block;
            background: linear-gradient(100deg, #afd7ff00 1%, #afd7ff 2.5%, #afd7ff80 5.7%, #afd7ff1a 93%, #afd7ffb4 95%, #afd7ff00 98%), linear-gradient(182deg, #afd7ff00, #afd7ff4d 8%, #afd7ff00 15%);
        }
    </style>
</head>

<body>
    <h1>Look at this cute lil <span class="highlight">highlight</span></h1>
    <p>This is a sample paragraph. How cool is that? Very cool. <span class="highlight">Veeerrryyy cool.</span></p>
    <p class="green-highlight">Check out my highlighted text! It's like a marker!</p>
    <p>And now we're back to normal text. With a few little <span class="pink-highlight">surprises</span> here and
        there.</p>
    <p>Feel free to copy <span class="blue-highlight">whatever you'd like here!</span></p>
</body>

</html>